<template>
  <div v-loading="showLoading">
    <div class="result-title">
      <span>系统匹配推荐产品结果</span>
    </div>
    <div class="product-box" v-if="productList">
      <el-table :data="recommendedProducts" border>
        <el-table-column width="350" label="产品名称">
          <template slot-scope="scope">
            <div class="productNameStyle">
              <div class="image">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="scope.row.productPic"
                  :preview-src-list="[scope.row.productPic]"
                >
                </el-image>
              </div>
              <div class="name-msg">
                <div style="color: #222; font-weight: bold">
                  {{ scope.row.productName }}
                </div>
                <div style="color: #999">ID: {{ scope.row.productId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品所属银行">
          <template slot-scope="scope">
            <span>{{ scope.row.bankName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="额度区间">
          <template slot-scope="scope">
            <span
              >{{ scope.row.productMinQuota }}万 -
              {{ scope.row.productMaxQuota }}万</span
            >
          </template>
        </el-table-column>
        <el-table-column label="可贷额度">
          <template slot-scope="scope">
            <el-input-number
              class="my-el-input-number"
              v-if="!goback"
              v-model="scope.row.quota"
              controls-position="right"
              @change="handleChange($event, scope.row)"
              :min="0"
              :max="scope.row.productMaxQuota"
            >
            </el-input-number>
            <span v-if="goback">{{ scope.row.quota }}万</span>
          </template>
        </el-table-column>

        <el-table-column v-if="!flagValue" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="goProductDetails(scope.row.productId)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pageRight"
        :current-page.sync="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageDate.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="pageDate.total"
        :page-count="pageDate.pageCount"
      >
      </el-pagination>
      <!-- 系统不推荐产品结果 -->
      <div class="result-title">
        <div style="margin:20px 0px">系统不推荐产品结果</div>
        <!-- <span>勾选或添加适合客户的产品</span> -->
      </div>
      <el-table :data="NonRecommendedProducts" border>
        <el-table-column width="350" label="产品名称">
          <template slot-scope="scope">
            <div class="productNameStyle">
              <div class="image">
                <el-image
                  style="width: 80px; height: 80px"
                  :src="scope.row.productPic"
                  :preview-src-list="[scope.row.productPic]"
                >
                </el-image>
              </div>
              <div class="name-msg">
                <div style="color: #222; font-weight: bold">
                  {{ scope.row.productName }}
                </div>
                <div style="color: #999">ID: {{ scope.row.productId }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="产品所属银行">
          <template slot-scope="scope">
            <span>{{ scope.row.bankName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="额度区间">
          <template slot-scope="scope">
            <span
              >{{ scope.row.productMinQuota }}万 -
              {{ scope.row.productMaxQuota }}万</span
            >
          </template>
        </el-table-column>
        <el-table-column label="不推荐原因">
          <template slot-scope="scope">
            <span>{{ scope.row.reason }}</span>
          </template>
        </el-table-column>

        <el-table-column v-if="!flagValue" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="goProductDetails(scope.row.productId)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="nonHandleSizeChange"
        @current-change="nonHhandleCurrentChange"
        class="pageRight"
        :current-page.sync="noCurrentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="noPageDate.pageSize"
        layout="total,sizes, prev, pager, next"
        :total="noPageDate.total"
        :page-count="noPageDate.pageCount"
      >
      </el-pagination>
      <div v-if="saveDataFlag" class="btn-box">
        <el-button v-if="!goback" type="primary" @click="saveData"
          >提交</el-button
        >
      </div>
      <div v-if="goback" class="btn-box">
        <el-button type="primary" @click="gobackCustomerMatch">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
// import { getBankList } from "@/api/system";
import { saveAloneQuota } from "@/api/customer";
import { getProjectList, getBankProductList } from "@/api/product";
export default {
  name: "developPlanCustomer",
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      }
    },
    matchStatus: {
      type: String,
      default:''
    },
    searchType: {
      type: String,
      default: ''
    },
    goback: {
      type: Boolean,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      // bankList: [],
      recommendedProducts: [],
      NonRecommendedProducts: [],
      bankId: "",
      productId: "",
      productList: [],
      selectProduct: [],
      errRes: "",
      flagValue: false,
      showLoading: false,
      currentPage: 1,
      noCurrentPage: 1,
      pageDate: {
        pageNum: 1,
        pageSize: 5
      },
      noPageDate: {
        pageNum: 1,
        pageSize: 5
      },
      saveDataFlag: true
      // goback:false
    };
  },
  created() {
    this.getProjectList();
    let flagValue = this.$route.path;
    if (flagValue == "/customerMatch") {
      this.flagValue = true;
    }
    console.log("flagValue", flagValue);
  },
  watch: {
    bankId: {
      handler(newVal, oldVal) {
        if (newVal && newVal != oldVal) {
          this.productId = "";
          this.selectProduct = [];
          this.getBankProductList(newVal);
        } else {
          this.productId = "";
          this.selectProduct = [];
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageDate.pageSize = val;
      this.getProjectList();
    },
    handleCurrentChange(val) {
      this.pageDate.pageNum = val;
      this.getProjectList();
    },
    nonHandleSizeChange(val) {
      this.noPageDate.pageSize = val;
      this.getProjectList();
    },
    nonHhandleCurrentChange(val) {
      this.noPageDate.pageNum = val;
      this.getProjectList();
    },
    getBankProductList(id) {
      getBankProductList({
        bankId: id,
        publishStatus: 1
      }).then(res => {
        this.selectProduct = res.data ? res.data : [];
      });
    },
    goProductDetails(idx) {
      let routeData = this.$router.resolve({
        path: "/productDetail", // path 要跳转的路由地址
        // query 要传递的参数
        query: {
          id: idx
        }
      });
      window.open(routeData.href, "_blank");
    },

    // console.log(idx);
    // this.productList.splice(idx, 1);
    // },

    getProjectList() {
      const stepMaping = {
        "14": 1,
        "15": 2,
        "2": 1,
        "4": 1,
        "9": 1,
        "7": 1,
        "5": 2,
        "10": 2,
        "11": 2,
        "13": 2,
        "12": 3
      };
      console.log(stepMaping[this.matchStatus], 'ddd');
      this.showLoading = true;
      let params = {
        matchType: this.$route.query.matchType,
        matchId: this.$route.query.id,
        matchStep:this.searchType == 1?  stepMaping[this.matchStatus] : this.$route.query.matchStep,
        recommendType: "1",
        ...this.pageDate
      };
      let noParams = {
        matchType: this.$route.query.matchType,
        matchId: this.$route.query.id,
         matchStep:this.searchType == 1?  stepMaping[this.matchStatus] : this.$route.query.matchStep,
        recommendType: "0",
        ...this.noPageDate
      };
      if (this.detailInfo.matchStep === "3") {
        params.matchStep = "3";
        noParams.matchStep = "3";
        this.saveDataFlag = true;
      }
      getProjectList(params).then(res => {
        this.recommendedProducts = res.data.list;
        this.pageDate.pageSize = res.data.pageSize;
        this.pageDate.total = res.data.total;
        this.currentPage = res.data.pageNum;
      });
      getProjectList(noParams).then(res => {
        this.NonRecommendedProducts = res.data.list;
        this.noPageDate.pageSize = res.data.pageSize;
        this.noPageDate.total = res.data.total;
        this.noCurrentPage = res.data.pageNum;
      });
      setTimeout(() => {
        this.showLoading = false;
      }, 2000);
    },
    gobackCustomerMatch() {
      this.$router.push({ name: "customerMatch" });
    },
    resetProduct() {},
    addProduct() {
      if (this.productId) {
        const obj = this.selectProduct.find(v => {
          return v.id === this.productId;
        });
        console.log(obj);

        const idx = this.productList.findIndex(v => {
          return v.id === obj.id;
        });
        if (idx === -1) {
          this.productList.push(obj);
        } else {
          this.$message({
            message: "该产品已添加",
            type: "warning"
          });
        }
      }
    },
    // getBankList() {
    //   getBankList().then(res => {
    //     this.bankList = res.data;
    //   });
    // },
    handleChange(value, v) {
      let params = {
        id: v.id,
        quota: value
      
      }
      saveAloneQuota(params).then(res=> {
        console.log(res);
      })

    },
    saveData() {
      this.$emit(
        "saveStatus",
        this.recommendedProducts,
        this.NonRecommendedProducts
      );
    }
  }
};
</script>

<style scoped lang="scss">
.my-el-input-number {
  position: relative;
}

.my-el-input-number::after {
  content: "万";
  display: inline-block;
  height: 20px;
  line-height: 20px;
  width: 20px;
  text-align: center;
  position: absolute;
  right: 45px;
  top: 50%;
  transform: translateY(-50%);
}

.my-el-input-number .el-input__inner {
  // 不加这行的话，当文本框里数值很大时，会和单位重叠
  padding-left: 30px;
  padding-right: 48px;
}

.result-title {
  display: flex;
  align-items: center;

  span,
  div {
    font-weight: 500;
    font-size: 18px;
    color: #222222;
    line-height: 25px;
  }
}

.product-box {
  margin-top: 20px;
}

.err-res {
  width: 100%;
  margin-top: 20px;
  display: flex;
}

.selete-product {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .select-bank {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }
}

.productNameStyle {
  display: flex;
  height: 100px;

  .image {
    width: 100px;
    height: 100px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .name-msg {
    margin-left: 10px;
    padding: 10px 0;
    height: 80px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
}
.btn-box {
  display: flex;
  justify-content: center;
}
</style>
